<template>
	<view class="choosePay">
		<uni-popup ref="choosePay" type="bottom">
			<view class="choosePayBox">
				<image class="close" @tap="hide" src="../../static/images/center/close.png" mode=""></image>
				<view class="title">选择支付方式</view>
				<view class="yt-list">
					<view class="pay-box">
						<block v-for="(item,index) in providerList" :key="index">
							<view class="way" @tap="chooseWay(index)">
								<view class="left">
									<image :src="item.icon" mode=""></image>
									<text>{{item.name}}</text>
								</view>
								<view :class="index == indexWay?'active':''" class="right">

								</view>
							</view>
						</block>
					</view>
				</view>
				<view class="submit" @tap="submit">确认支付</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		name: "choosePay",
		components: {
			uniPopup
		},
		props: {

		},
		data() {
			return {
				providerList: [],
				indexWay: 0,
				payType: "weixin",
				provider: "wxpay"
			}
		},
		created() {
			if (uni.getStorageSync("available_alipay") == 0) {
				this.providerList = [{
					name: "微信支付",
					icon: "/static/images/public/weixin.png",
					payType: "weixin",
					provider: "wxpay"
				}]
			} else {
				this.providerList = [{
						name: "微信支付",
						icon: "/static/images/public/weixin.png",
						payType: "weixin",
						provider: "wxpay"
					},
					{
						name: "支付宝支付",
						icon: "/static/images/public/alipay.png",
						payType: "alipay",
						provider: "alipay"
					}
				]
			}
		},
		methods: {
			chooseWay(index) {
				this.indexWay = index
				this.payType = this.providerList[index].payType
				this.provider = this.providerList[index].provider
			},
			//打开提示面板
			show() {
				this.$refs.choosePay.open()
			},
			//关闭提示面板
			hide() {
				this.$refs.choosePay.close()
			},
			// 点击确定按钮
			submit() {
				let data = {
					payType: this.payType,
					provider: this.provider
				}
				this.$emit("confirm", data)
				this.hide()
			},
			// 点击取消按钮
			cancel() {
				this.hide()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.choosePay {
		.choosePayBox {
			background: #fff;
			height: 50vh;
			border-radius: 20rpx 20rpx 0 0;
			position: relative;

			.close {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				width: 30rpx;
				height: 30rpx;
				padding: 10rpx;
			}

			.title {
				text-align: center;
				line-height: 120rpx;
				font-size: 36rpx;
				font-weight: bold;
				margin-bottom: 40rpx;
			}

			.yt-list {
				.pay-box {
					.way {
						padding: 20rpx 30rpx 20rpx 40rpx;
						line-height: 70rpx;
						font-size: 28rpx;
						width: 100%;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left {
							display: flex;
							align-items: center;

							image {
								width: 50rpx;
								height: 50rpx;
								margin-right: 20rpx;
							}
						}

						.right {
							width: 32rpx;
							height: 32rpx;
							border-radius: 50%;
							box-sizing: border-box;
							border: 10rpx solid #fff;
							box-shadow: 0 0 0 4rpx #eee;
						}

						.active {
							background-color: $mall-price;
							box-shadow: 0 0 0 4rpx rgba(255, 0, 0, 1);
						}
					}
				}
			}

			.submit {
				position: absolute;
				left: 75rpx;
				bottom: 70rpx;
				bottom: calc(70rpx + env(safe-area-inset-bottom));
				width: 600rpx;
				height: 90rpx;
				border-radius: 45rpx;
				background: #FB3737;
				font-size: 32rpx;
				color: #fff;
				text-align: center;
				line-height: 90rpx;
			}
		}
	}
</style>
